﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
  <link rel="stylesheet" href="closure-library/closure/goog/css/tab.css"> 
  <link rel="stylesheet" href="closure-library/closure/goog/css/tabbar.css">
  
  <script type="text/javascript" src="closure-library/closure/goog/base.js"></script>
  </script>
  <script>
      goog.require('goog.dom');
      goog.require('goog.events');
      goog.require('goog.events.EventType');
      goog.require('goog.object');
      goog.require('goog.ui.Component.EventType');
      goog.require('goog.ui.RoundedTabRenderer');
      goog.require('goog.ui.Tab');
      goog.require('goog.ui.TabBar');
  </script> 
  
  <style>
  fieldset {
padding:10px;
	border:1px solid #369;
}
.goog-tab-content {
	height:490px;
	margin:0;
	border:1px solid #6b90da;
	border-top:0;
	padding:4px 8px;
	background:#fff;
	
}
.hid {
	display: none;
}
</style>
</head>

<body>

<div id="rem_cont">
    <div id="start" class="goog-tab-bar goog-tab-bar-top">
	    <div class="goog-tab">Remplazo 1</div>
	    <div class="goog-tab">Remplazo 2</div>
	    <div class="goog-tab">Remplazo 3</div> <br /> <br />
    </div>

    <div id='settings_tab_content' class='hid'>
	     <p>Opciones:</p>
         <ul>
            <li>Opción 1</li>	
	        <li>Opción 2</li>
	        <li>Opción 3</li>
         </ul>
	    
        <button>adsasd</button>
    </div>
    <div id="start_content" >
       <p>Seleccione algún tab</p>
    </div>
    <div id='hello_tab_content' class='hid'>
        <p>Hola este es el tab Alta 1.</p>
        <input type="button" value="Btn" />
    </div>
</div>

<!-- Use goog-tab-bar-clear to separate the tabs from the content. -->

<div id="test_load_data">
    <p>Este es un ejemplo de load data</p>
</div>


<script>
    var topTab = new goog.ui.TabBar();
    topTab.decorate(goog.dom.getElement('start'));
    goog.events.listen(topTab, goog.ui.Component.EventType.SELECT, function (e) {
        var tabSelected = e.target;
        var contentElement = goog.dom.getElement('start_content');
        if (tabSelected.getCaption() == 'Alta 1') {
            goog.dom.setTextContent(contentElement,
          goog.dom.getTextContent(goog.dom.getElement('hello_tab_content')));
        } else if (tabSelected.getCaption() == 'Alta 2') {
            contentElement.innerHTML =
           goog.dom.getElement('settings_tab_content').innerHTML;
        } else if (tabSelected.getCaption() == 'Alta 3') {
            var cont = "Este es el tab Alta 3.";
            goog.dom.setTextContent(contentElement, cont);
        }
    });
</script>
</body>
</html>
